import React from "react";
import { Row, Col, Table, message, Button } from 'antd';
import { connect } from 'dva';
import SearchWaterDetailForm from './components/SearchWaterDetailForm';
import WaveformFigure from './components/WaveformFigure';
import TemperatureformFigure from './components/TemperatureformFigure';
import { exportExcl } from '@/utils/xlsx';
import XLSX from "xlsx";
import { getQueryString } from '@/utils/util';

interface IProps {
  dispatch?: Function,
  children?: React.ReactNode,
  outdoorFireHydrantLog?: {
    data: Array<any>,
    dataCnt: number
  },
  loading?: boolean
}

let setPageNum = 1;

@connect(({ analyse_device, loading }) => ({
  outdoorFireHydrantLog: analyse_device.outdoorFireHydrantLog,
  loading: loading.effects['analyse_device/queryDeviceOutdoorFireHydrantLog'],
}))
class Basiccolumn extends React.PureComponent<IProps> {

  state = {
    current: 1,
    sortType: '',
    isChangePage: false,
    deviceId: getQueryString('id')
  };

  queryData = (params) => {
    const { dispatch } = this.props;
    params.deviceId = this.state.deviceId;
    dispatch({
      type: 'analyse_device/queryDeviceOutdoorFireHydrantLog',
      payload: params,
    });
  };

  initCurrent = () => {
    this.setState({
      current: 1
    })
  };

  handleExport = e => {
    const { outdoorFireHydrantLog = { data: [] } } = this.props;
    const { data } = outdoorFireHydrantLog;

    const ans = data && Array.isArray(data) && data.map(item => {
      return {
        '水压/MPa': item.valueMap.pressure,
        '电压': item.valueMap.voltage,
        '接收时间': item.createTime
      }
    });

    exportExcl({
      XLSX,
      data: ans,
      name: "智慧用水详情统计",
      fileName: "智慧用水详情统计"
    })
  };

  componentWillMount() {
    message.loading('', 0.6);
    this.queryData({
      pageNum: 1,
      pageSize: 10
    });
  }

  render() {
    const { outdoorFireHydrantLog = { data: [], dataCnt: 0 } } = this.props;
    const { data, dataCnt } = outdoorFireHydrantLog;
    const ans = data && Array.isArray(data) ? data.map((item, index) => ({
      key: item.id,
      receiveTime: item.createTime ? item.createTime : '/',
      voltageValue: item.valueMap ? Object.keys(item.valueMap).filter(it => it.indexOf('pressure') == 0).map(v => item.valueMap[v]).join(';') : '/',
      voltage: item.valueMap ? Object.keys(item.valueMap).filter(it => it.indexOf('voltage') == 0).map(v => item.valueMap[v]).join(';'): '/'
    })
    ) : [];

    const pagination = {
      total: dataCnt,
      showTotal: total => `共 ${total} 条`,
      showQuickJumper: true,
      pageSize: 10,
      onChange: (current) => {
        setPageNum = current;
        this.setState({
          current,
          isChangePage: true
        });
        this.queryData({
          pageNum: 1,
          pageSize: 10
        });
      },
    };

    const columns = [{
      title: '水压/MPa',
      dataIndex: 'voltageValue'
    }, {
      title: '电压',
      dataIndex: 'voltage',
    }, {
      title: '接收时间',
      dataIndex: 'receiveTime'
    }];

    return (
      <>
        <div style={{ 'margin': '25px 30px' }}>
          <Button type="primary" onClick={
            () => {
              window.history.back();
            }}>返回</Button>
        </div>
        <Row key="1" style={{ 'margin': '25px 30px' }}>
          <Col span={12}>
            <div style={{ 'position': 'relative' }}>
              <h5 style={{ 'fontSize': '18px', 'position': 'absolute', 'top': '20px', 'left': '0' }}>水压波形图</h5>
              <WaveformFigure />
            </div>
          </Col>
          <Col span={12}>
            <div style={{ 'position': 'relative' }}>
              <h5 style={{ 'fontSize': '18px', 'position': 'absolute', 'top': '20px', 'left': '0' }}>水位波形图</h5>
              <TemperatureformFigure />
            </div>
          </Col>
        </Row>
        <Row>
          <SearchWaterDetailForm current={this.state.current} initCurrent={this.initCurrent} handleExport={this.handleExport} />
          <Table
            columns={columns}
            pagination={pagination}
            dataSource={ans}
            bordered
            loading={this.props.loading}
          />
        </Row>
      </>
    );
  }
}

export default Basiccolumn;
